<script setup>
import {onMounted, ref, watch} from "vue";
import {useRoute} from "vue-router";
import {ElMessage} from "element-plus";
import {formatDate, useMouseInElement} from "@vueuse/core";
import {BookCommentService, BookDetailService} from "@/apis/book";
import {useCartStore} from "@/stores/shopcarStore";

const book = ref({})
const comment = ref([])
const defaultPic = ref("https://book-store-anki.oss-cn-guangzhou.aliyuncs.com/default.png")

const route = useRoute()
const cartStore = useCartStore()

// 获取图书详情
const getBook = async () => {
    const res = await BookDetailService(route.params.id)
    console.log(res)
    book.value = res.data
    let imgURL = book.value.img
    const img = new Image()
    img.src = imgURL
    imgWidth.value = img.width
    imgHeight.value = img.height
}
// 获取顾客评价
const getComment = async () => {
    const res = await BookCommentService(route.params.id)
    comment.value = res.data
}

getBook()
getComment()

const imgWidth = ref(0)
const imgHeight = ref(0)

// count
const count = ref(1)

// 放大镜效果
const target = ref(null)
const left = ref(0)
const top = ref(0)
const positionX = ref(0)
const positionY = ref(0)

const {elementX, elementY, isOutside} = useMouseInElement(target)

watch([elementX, elementY, isOutside], () => {
    if(isOutside.value) {
        return
    }

    if (elementX.value > 100 && elementX.value < 300) {
        left.value = elementX.value - 100
    }
    if (elementY.value > 100 && elementY.value < 300) {
        top.value = elementY.value - 100
    }
    if (elementX.value > 300) {
        left.value = 200
    }
    if (elementX.value < 100) {
        left.value = 0
    }
    if (elementY.value > 300) {
        top.value = 200
    }
    if (elementY.value < 100) {
        top.value = 0
    }

    positionX.value = -left.value * 2 * (imgWidth.value / imgHeight.value)
    positionY.value = -top.value * 2 * (imgHeight.value / imgWidth.value)
})

const addCart = () => {
    if (book.value.id && count.value <= book.value.stock) {
        cartStore.addCart({
            id: book.value.id,
            count: count.value,
            selected: true
        })
        // ElMessage.success("添加成功")
    } else {
        ElMessage.warning('添加失败，可能是库存不足')
    }
}

</script>

<template>
  <!-- details start -->
    <div class="d-main clearfix wrapper" id="goods-details">
<!--        图片-->
        <div class="d-img" >
            <div ref="target">
                <img :src=book.img alt=""/>
                <div class="layer" :style="{ left: `${left}px`, top: `${top}px` }" v-show="!isOutside"></div>
            </div>
            <div class="large" :style="[
                {
                backgroundImage: `url(${book.img})`,
                backgroundPositionX: `${positionX}px`,
                backgroundPositionY: `${positionY}px`,
                },
            ]" v-show="!isOutside"></div>
        </div>
<!--        内容-->
        <div class="d-content">
            <h2>{{ book.name }}</h2>
            <span class="d_information">ISBN：{{book.isbn}}</span>
            <span class="d_information">作者：{{ book.author }}</span>
            <div class="d-price">
                <span class="d-show-price">价格</span>
                <span class="d-cur-price">￥{{ parseFloat(book.price).toFixed(2) }}</span>
                <span class="d-old-price">￥{{ parseFloat(book.oldPrice).toFixed(2) }}</span>
            </div>
            <div class="d-buy">
                <div class="p-num">
                    <span class="num">数量</span>
                    <el-input-number size="small" v-model="count" :min="1" :max="99"
                                     style="float:left;"/>
                    <span class="stock">库存<span>{{ book.stock }}</span></span>
                </div>
                <div class="p-submit">
                    <button @click="addCart">
                        <el-icon>
                            <ShoppingCart/>
                        </el-icon>
                        加入购物车
                    </button>
                </div>
            </div>

            <div class="d-introduce">
                <span>书籍简介</span>
                <p>{{ book.detail }}</p>
            </div>
        </div>

    </div>
    <!--        评论-->
    <div class="comment clearfix wrapper">
        <div class="head">
            <h2>买家评论</h2>
        </div>
        <div v-if="comment.length !== 0">
            <el-col class="comment_dt">
                <el-row class="comment_dl" v-for="item in comment" :key="item.id">
                    <img :src="item.userPic ? item.userPic : defaultPic" class="avatar"/>
                    <span class="user">{{ item.nickname }}</span>
                    <span class="time">{{ item.createTime }}</span>
                    <span class="comment_d">{{ item.detail }}</span>
                </el-row>
            </el-col>
        </div>
        <div v-else>
            <h3 style="text-align: center; margin-top: 20px;">还没有评论呢</h3>
        </div>
    </div>

  <!-- details end -->

</template>

<style scoped>
.d-img {
    position: relative;
    float: left;
    margin-top: 50px;
    box-shadow: 0px 3px 8px 1px #999;
}

.d-img img {
    width: 400px;
    height: 400px;
    object-fit: contain;
}

.d-content {
    float: left;
    width: 600px;
    margin-left: 30px;
    margin-top: 50px;
}

.d-content h2 {
    width: 600px;
    height: 30px;
    overflow: hidden;
    color: black;
}

.d-content .d_information {
    margin-right: 10px;
}

.d-price {
    margin-top: 30px;
    height: 40px;
}

.d-show-price {
    float: left;
    line-height: 40px;
}

.d-cur-price {
    float: left;
    font-size: 24px;
    color: #b1191a;
    margin-left: 5px;
    line-height: 40px;
}

.d-buy {
    height: 60px;
}

.d-old-price {
    float: left;
    margin-left: 15px;
    font-size: 16px;
    text-decoration: line-through;
    color: #999;
    line-height: 40px;
}

.d-buy .p-num .num {
    float: left;
    margin-right: 20px;
    font-size: 16px;
}

.d-buy .p-num .stock {
    float: left;
    margin-left: 10px;
}

.d-buy .p-num {
    float: left;
    margin-top: 20px;
}

.d-buy .p-submit {
    float: right;
    margin-top: 20px;
    margin-right: 5px;
}

.d-buy .p-submit button {
    font-size: 20px;
    padding: 5px 30px;
    margin-right: 5px;
    color: white;
    border: 0;
    background-color: #b1191a;
}

.d-buy .p-submit button .car {
    color: white;
}

.d-introduce span {
    color: #8b8b8b;
}

.d-introduce {
    margin-top: 5px;
    padding-top: 10px;
    border-top: 2px solid #b1191a;
    width: 600px;
    height: 210px;
    overflow: hidden;
}

.d-introduce p {
    font-size: 14px;
}

.layer {
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, 0.2);
    left: 0;
    top: 0;
    position: absolute;
}

.large {
    position: absolute;
    top: 0;
    left: 412px;
    width: 400px;
    height: 400px;
    z-index: 999;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-repeat: no-repeat;
    background-size: 800px;
    background-color: #f8f8f8;
}

.comment .head{
    padding-top: 50px;
    border-bottom: #b1191a 2px solid;
}

.comment h2 {
    font-size: 20px;
    font-weight: 400;
    color: #b1191a;
    line-height: 40px;
}

.comment .comment_dl {
    margin-top: 10px;
    color: black;
    border-bottom: 1px solid #f1f1f1;
}

.comment .comment_dl .avatar{
    float: left;
    width: 50px;
    margin-bottom: 10px;
}

.comment .comment_dl .user {
    float: left;
    font-size: 18px;
    width: 80px;
    overflow: hidden;
    margin-left: 20px;
}

.comment .comment_dl .time {
    position: absolute;
    top: 30px;
    left: 70px;
    font-size: 12px;
    color: #8b8b8b;

}

.comment .comment_dl .comment_d {
    float: left;
    font-size: 14px;
    width: 860px;
    margin-left: 30px;
}

</style>